{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<script src="{% static 'js/vue.min.js'%}"></script>
<link rel="stylesheet" href="{% static 'css/swiper-bundle.min.css' %}" />
<script src="{% static 'js/swiper-bundle.min.js'%}"></script>
<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> -->
<!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script> -->

{% endblock extra_head %}

{% block main %}
{% if user.is_authenticated %}
  <div class="main w-75 ms-5 pt-1" style="background-color: #0C2448;">
    <div class='swiper-container mb-1 w-100 overflow-hidden'>
      <div class="swiper-wrapper">
        <div class=" swiper-slide" v-for="image, index in images" :key="index">
          <img :src="'/media/screenshoot/' + image" :alt="image">
        </div>
      </div>
    </div>
    <video src="/media/main_page_video.mp4" :width="videoHeight + 'px' " controls="true" loop=""></video>
  </div>
  <script>
    var vm = new Vue({
      el: ".main",
      created() {
        window.addEventListener("resize", this.ResizeVideo);
      },
      destroyed() {
        window.removeEventListener("resize", this.ResizeVideo);
      },
      data: {
        videoHeight: 300,
        images: ['screen_5', 'screen_1', 'screen_13', 'screen_7', 'screen_11', 'screen_10', 'screen_12', 'screen_3', 'screen_2',
          'screen_8', 'screen_9', 'screen_6', 'screen_4'
        ]
      },
      methods: {
        ResizeVideo: function () {
          this.videoHeight = document.querySelector('.main').offsetWidth
        }
      },
      mounted() {
        var mySwiper = new Swiper('.swiper-container', {
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          },
          slidesPerView: 4,
          autoHeight: true,
          spaceBetween: 23,
          loop: true,
        });
        this.ResizeVideo();
      }
    })
  </script>
  {% else %}
  {% include "pcs_login.html" %}
  {% endif %}

  {% endblock %}
